import Search from "@/components/public/Search";
import { View, Image, Text } from "@tarojs/components";
import ico_time from "@/assets/image/ico_time.svg";
import ico_del_two from "@/assets/image/ico_del_two.svg";
import "./index.scss";
import { talkDelete, talkGet } from "@/services/entities/all";
import { useEffect, useState } from "react";
import { useReachBottom } from "@tarojs/taro";
import { preview, formatDateTime } from "@/helper/utils";
import Taro from "@tarojs/taro";
const DynamicManagePage = () => {
  const [page, setPage] = useState(1);
  const [list, setList] = useState<any>([]);
  const [title, setTitle] = useState("");

  const getList = (pageNum) => {
    talkGet({ currentPage: page, pageSize: 10, title }).then((res: any) => {
      if (pageNum === 1) {
        setList(res.records);
      } else {
        setList((old) => {
          return [...old, ...res.records];
        });
      }
    });
  };

  const deleteDynamic = (item: any, index: number) => {
    Taro.showModal({
      title: "提示",
      content: "是否删除当前动态",
      success: (res) => {
        if (res.confirm) {
          talkDelete({ id: item.id }).then(() => {
            const tmp = [...list];
            tmp.splice(index, 1);
            setList(tmp);
          });
        }
      },
    });
  };

  useReachBottom(() => {
    if (page * 10 === list.length) {
      setPage((old) => old + 1);
    }
  });

  useEffect(() => {
    getList(page);
  }, [page]);

  return (
    <View className="dynamic-manage-container bg-page">
      <View className="dis-flex bg-ffffff pd-16 border-box">
        <Search
          className="bg-ffffff width-full"
          onInput={(value) => {
            setTitle(value);
          }}
          right={
            <View
              onClick={() => {
                setPage(1);
                getList(1);
              }}
              className="bg-394B5D cl-white fs-28 lh-38 pd-tb-8 border-box pd-lr-38 br-28 mr-4"
            >
              搜索
            </View>
          }
        />
      </View>
      <View className="flex-column pd-20 border-box">
        {list.map((item, index) => {
          return (
            <View
              className="flex-column pd-18 border-box bg-ffffff br-8 mt-16"
              key={index}
            >
              <View className="dis-flex align-center">
                <Text className="fs-32 lh-42 cl-black">{item.storeName}</Text>
              </View>
              <View className="fs-24 lh-32 cl-black mt-24">{item.title}</View>
              <View className="dis-flex flex-wrap gap-16">
                {item.imageUrl?.split(",").map((image, idx) => {
                  return (
                    <Image
                      onClick={() => {
                        preview(image, item.imageUrl?.split(","));
                      }}
                      src={image}
                      className="img-156 br-8"
                      key={idx}
                    />
                  );
                })}
              </View>
              <View className="dis-flex align-center mt-32">
                <Image src={ico_time} className="img-32" />
                <Text className="ml-8 fs-24 lh-32 cl-848484">
                  发布时间：{formatDateTime(item.createTime)}
                </Text>
              </View>
              <View className="mt-28 border-top dis-flex align-center pt-22 border-box">
                <View className="flex-1"></View>
                <View
                  className="flex-center flex-2"
                  onClick={() => {
                    deleteDynamic(item, index);
                  }}
                >
                  <Image className="img-36" src={ico_del_two} />
                  <Text className="ml-8 fs-24 lh-36 cl-E14848">删除</Text>
                </View>
                <View className="flex-1"></View>
              </View>
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default DynamicManagePage;
